<template>
  <div class="view-container">
    <div class="zh-query-box">
      <QueryBox 
      ref="queryBox"
      :content="queryProperty"
      @query="toQuery"
      ></QueryBox>
    </div>
    <div class="zh-table-box">
      <Table 
      :data="tableData" 
      :globalOperate="globalOperate"
      :globalTab="globalTab"
      :columns="tableColumns" 
      :rowOperate="rowOperate"
      :rowOperateProperty="rowOperateProperty"
      :showPrint="showToolbox.showPrint"
      :showImport="showToolbox.showImport"
      :showExport="showToolbox.showExport"
      :rowStyle="setRowStyle"
      @pageChange="handlePageChange"
      :page="page"
      ></Table>
      <el-dialog
      v-model="dialogParams.visible"
      :width="dialogParams.width"
      :title="dialogParams.title"
      @close="handleClose(userFormRef)"
      >
      <transition 
        name="cube" mode="out-in"
      >
      <div class="second" style="width: 100%;">
        <el-form :model="userForm" ref="userFormRef" label-width="auto" :rules="rules">
          <el-form-item label="基本信息：" class="sub-title" label-position="top" v-if="dialogParams.opr !== 'editPasswd'">
            <el-col class="validate-col" :span="7">
              <el-form-item prop="uid" label="身份证号" label-position="top">
                <el-input v-model="userForm.uid" placeholder="请输入身份证号" v-if="dialogParams.opr === 'add'"/>
                <p v-else-if="dialogParams.opr === 'edit'">&nbsp;&nbsp;{{userForm.uid}}</p>
              </el-form-item>
            </el-col>
            <el-col class="validate-col" :span="7" :offset="1">
              <el-form-item prop="uname" label="姓名" label-position="top">
                <el-input v-model="userForm.uname" placeholder="请输入姓名" v-if="dialogParams.opr === 'add'"/>
                <p v-else-if="dialogParams.opr === 'edit'">&nbsp;&nbsp;{{userForm.uname}}</p>
              </el-form-item>
            </el-col>
            <el-col :span="7" :offset="1" class="validate-col">
              <el-form-item prop="rid" label="绑定角色" label-position="top">
                <el-select v-model="userForm.rid" placeholder="请选择绑定角色" @change="changeBindRole" v-if="dialogParams.opr==='add'">
                  <el-option
                    v-for="item in roleList"
                    :key="item.rid"
                    :label="item.rname"
                    :value="item.rid"
                  >
                  </el-option>
                </el-select>
                <p v-else-if="dialogParams.opr === 'edit'">&nbsp;&nbsp;{{getRname(userForm.rid)}}</p>
              </el-form-item>
            </el-col>
            <el-col :span="7" class="validate-col">
              <el-form-item prop="idpolice" label="警号" label-position="top">
                <el-input v-model="userForm.idpolice" placeholder="请输入警察编号" v-if="dialogParams.opr === 'add'"/>
                <p v-else-if="dialogParams.opr === 'edit'">&nbsp;&nbsp;{{userForm.idpolice}}</p>
              </el-form-item>
            </el-col>
            <el-col class="validate-col" :span="7" :offset="1">
              <el-form-item prop="phone" label="手机号" label-position="top">
                <el-input v-model="userForm.phone" placeholder="请输入手机号"/>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="10" :offset="1" class="validate-col">
              <el-form-item prop="area" label="所属地区：" :required="false">
                <el-cascader
                  size="default"
                  :options="areaOptions"
                  v-model="selectedAreaOptions"
                  @change="handleAreaChange">
                </el-cascader>
              </el-form-item>
            </el-col> -->
            <el-col :span="7" :offset="1" class="validate-col">
              <el-form-item prop="org" label="所属部门" label-position="top">
                <el-input v-model="userForm.org" placeholder="请输入所属部门"/>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item :label="['add','edit'].includes(dialogParams.opr)?'账号安全：':''" class="sub-title" label-position="top">
            <!-- <el-col :span="18" v-if="dialogParams.opr === 'editPasswd'" class="validate-col">
              <el-form-item prop="uid" label="身份证号" label-position="top">
                <el-input v-model="userForm.uid" placeholder="请输入身份证号" disabled/>
                <p>{{userForm.uid}}</p>
              </el-form-item>
            </el-col> -->
            <el-col :span="'add' === dialogParams.opr?10:18" v-if="['add','editPasswd'].includes(dialogParams.opr)" class="validate-col">
              <el-form-item prop="passwd" label="密码" label-position="top">
                <el-input v-model="userForm.passwd" placeholder="请输入密码" show-password type="password" />
              </el-form-item>
            </el-col>
            <el-col :span="'add' === dialogParams.opr?10:18" :offset="'add' === dialogParams.opr?1:0" v-if="['add','editPasswd'].includes(dialogParams.opr)" class="validate-col">
              <el-form-item prop="passwd2" label="确认密码" label-position="top">
                <el-input v-model="userForm.passwd2" placeholder="请再次输入密码" show-password type="password" />
              </el-form-item>
            </el-col>
            <el-col :span="10" v-if="dialogParams.opr !== 'editPasswd'">
              <el-form-item prop="use_ip" label="IP地址" label-position="top">
                <ipinput class="ip-input" v-model:ip="userForm.use_ip" @change="changeUseIp"/>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      </transition>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose(userFormRef)">取 消</el-button>
          <el-button
            type="primary"
            @click="execute(userFormRef)"
          >确 定</el-button>
        </div>
      </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="tsx">
import Table from "@/components/Table/table.vue"
import QueryBox from "@/components/QueryBox/queryBox.vue";
import ipinput from "@/components/ipinput/ipinput.vue";
import md5 from 'js-md5'
import { validatePsidno, validatePhone, validateIP, checkUid, validateUname, checkUname, checkIdpolice, checkPasswd, checkPasswd2 } from "./validate";
import {
  apiAddUser,
  apiEditUser,
  apiListUser,
  apiGetUser,
  apiDelUser,
  apiEditPasswd
} from "@/api/user";

import { ref, watch, onMounted, h, nextTick, reactive } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElButton, ElIcon, ElMessage, ElMessageBox, ElRadioButton, ElRadioGroup, ElSwitch, ElTabPane, ElTabs, ElTag } from "element-plus";
import { regionData,codeToText,pcaTextArr  } from 'element-china-area-data'
import Add from "@iconify-icons/ri/add-fill";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

defineOptions({
  name: "User",
});

onMounted(async () => {
  initPage()
  initTableProperty()
})

const queryBox = ref()

const initTableProperty = () => {
  initRowOperate()
  tableColumns.value = wholeTableColumns
  globalOperate.value = wholeGlobalOperate
  globalTab.value = wholeGlobalTab
}

const showToolbox = ref({
  showPrint: false,
  showImport: false,
  showExport: false,
  showTool: true
})

const rowOperateProperty = ref({
  width: '360',
  show: true
})

const page = ref({
  page:1,
  pageSize:10,
  total:0
})

const tableData = ref([]);

const tableColumns = ref([])
const wholeTableColumns = [
  {
    align:'left',
    title:'身份证号',
    field: 'uid',
    minWidth: '120px'
  },
  {
    align:'left',
    title:'姓名',
    field:'uname'
  },
  {
    align:'left',
    title:'角色',
    field: 'rid',
    minWidth:'40px',
    render : (dom,props) => {
      return (
        h('div',{class:"operate-box"},
          [h(ElTag, {
            type:props.row.rid === 2 ?'primary':props.row.rid === 3?'success':props.row.rid === 4?'warning':'danger'
          }, ()=>transRole(props.row.rid))]
        )
      )
    }
  },
  {
    align:'left',
    title:'警号',
    field: 'idpolice',
    minWidth:'30px',
    render : (dom,props) => {
      return (
        h('div',{class:"operate-box"},
          [h(ElTag, {
            type: 'primary',
            effect: "plain",
            round:true
          }, ()=>props.row.idpolice)]
        )
      )
    }
  },
  {
    align:'left',
    title:'手机号',
    field:'phone'
  },
  {
    align:'left',
    title:'所属部门',
    field:'org'
  },
  {
    align:'left',
    title:'过期时间',
    field:'expire',
  },
  // {
  //   align:'left',
  //   title:'省市区',
  //   field: 'address',
  //   showOverflow: 'tooltip',
  //   render : (dom,props) => {
  //     return (
  //       h('div',{class:"operate-box"},
  //         [h('span',{},props.row.province+props.row.city+props.row.district)]
  //       )
  //     )
  //   }
  // },
  {
    align:'left',
    title:'创建时间',
    field: 'ct',
    showOverflow:'tooltip'
  },
  {
    align:'left',
    title:'更新时间',
    field: 'ut',
    showOverflow:'tooltip'
  }
]

const transRole = (rid) => {
  let idx = roleList.value.findIndex(item => rid === item.rid)
  return idx !== -1?roleList.value[idx].rname:rid === 1?'超级管理员':'非法角色'
}

const globalTab = ref({})
const wholeGlobalTab = {
  render : () => {
    return (
      h('div',{class:"operate-box"},
        [h(ElRadioGroup,
          {
            modelValue: necessaryQuery.value.delFlag,
            "onUpdate:modelValue": (val) => switchDelflag(val)
          }, () => [
            h(ElRadioButton, {
              value:1
            },()=>"常规账号"),
            h(ElRadioButton, {
              value:2
            },()=>"弃用账号")
          ])
      ]
      )
    )
  }
}

const necessaryQuery = ref({
  delFlag: 1
})

const getRname = (rid) => {
  if (rid < 1) {
    return '未知角色'
  }
  let idx = roleList.value.findIndex(item => item.rid === rid)
  return idx === -1?'未知角色':roleList.value[idx].rname
}

const switchDelflag = async(val) => {
  necessaryQuery.value.delFlag = val
  page.value = JSON.parse(JSON.stringify({
    page: 1,
    pageSize: 10,
    total: 10
  }))
  await toQuery(queryBox.value.propertyValue)
  nextTick(() => {
    rowOperateProperty.value.show = val === 1 ? true :false
  })
}

const globalOperate = ref({})
const wholeGlobalOperate = {
  render : () => {
    return (
      h('div',{class:"operate-box"},
        [h(useRenderIcon(Add),
          {
            style: "border: 1px solid #dcdfe6;font-size:34px; border-radius:100%;padding:5px;cursor: pointer;",
            onclick: () => toAdd()
          })
      ]
      )
    )
  }
}
const operationList = {
  render : (dom,props) => {
    return (
      h('div',{class:"operate-box"},
        [
        h(ElButton, {
          type: 'warning',
          plain: true,
          disabled: props.row.del_flag === 2,
          onClick: ()=>toEdit(props.row)
        }, () => "修改"),
        h(ElButton,{
          type: 'info',
          plain: true,
          disabled: props.row.del_flag === 2,
          onClick: ()=>toEditPasswd(props.row)
        }, () => "重置密码"),
        h(ElButton,{
          type: 'danger',
          plain: true,
          disabled: props.row.del_flag === 2,
          onClick: ()=>toDel(props.row)
        },()=>"删除")
      ]
      )
    )
  }
}


const rowOperate = ref({})

const initRowOperate = () => {
  rowOperateProperty.value.show = true
  rowOperate.value = operationList
}  

// 分页
const handlePageChange = (val) => {
  page.value = val
  toQuery(queryBox.value.propertyValue)
}

const setRowStyle = ({ rowIndex }) => {
  if (tableData.value.map((item,index) => {
    if (item.del_flag == 2) return index
  }).includes(rowIndex)) {
    return {
      backgroundColor: 'var(--el-disabled-bg-color)',
      color: 'var(--el-disabled-text-color)'
    }
  }
}

const queryProperty = [
  {
    label: '身份证号',
    type: 'input', // 默认有 input,selectbox,date
    labelWidth: 25,
    valueWidth: 75,
    elementName: 'uid',  // 调用方的元素属性名称
    elementValueType: 'string', // 默认 strng,number,array
    elementDefaultValue: '',
    elementWidth: '900',
    elementProperty:{
      placeholder: '请输入用户身份证'
    }
  },
  {
    label: '用户姓名',
    type: 'input', // 默认有 input,selectbox,date
    labelWidth: 25,
    valueWidth: 75,
    elementName: 'name',  // 调用方的元素属性名称
    elementValueType: 'string', // 默认 strng,number,array
    elementDefaultValue: '',
    elementProperty:{
      placeholder: '请输入用户姓名'
    }
  },
  {
    label: '创建时间',
    type: 'date', // 默认有 input,selectbox,date
    labelWidth: 25,
    valueWidth: 75,
    elementName: 'daterange',  // 调用方的元素属性名称
    elementValueType: 'array', // 默认 strng,number,array
    elementDefaultValue: [],
    elementProperty: {
      startPlaceholder:"开始时间",
      endPlaceholder: "结束时间",
      rangeSeparator: "到",
      disabledDate: (time) => {
        return time.getTime() > Date.now(); //禁止选择今天以后的时间
        //return time.getTime() < Date.now() - 8.64e7;//禁止选择今天以前的时间
      },
    }
  },
]

const areaOptions = regionData   
const selectedAreaOptions = ref([])

const handleAreaChange = (data) => {
  userForm.value.province = codeToText[data[0]]
  userForm.value.city = codeToText[data[1]]
  userForm.value.district = codeToText[data[2]]
}

const text2code = (data) => {
  let provinceIdx = pcaTextArr.findIndex(item => {
    return item.label === data[0]
  })
  if (provinceIdx === -1) return
  let cityIdx = pcaTextArr[provinceIdx].children.findIndex(item => {
    return item.label === data[1]
  })
  if (cityIdx === -1) return
  let districtIdx = pcaTextArr[provinceIdx].children[cityIdx].children.findIndex(item => {
    return item.label === data[2]
  })
  if (districtIdx === -1) return
  return [pcaTextArr[provinceIdx].value,pcaTextArr[provinceIdx].children[cityIdx].value,pcaTextArr[provinceIdx].children[cityIdx].children[districtIdx].value]
}

const toQuery = async (data) => {
  var queryParam: Object  = {
    del: necessaryQuery.value.delFlag
  }
  if (data && data.daterange && data.daterange.length){
    queryParam.start_time = formatDate(data.daterange[0])
    queryParam.end_time = formatDate(data.daterange[1])
  }
  if (data.uid.length > 0) queryParam.uid = data.uid
  if (data.name) queryParam.uname = data.name
  if (validateQuery(queryParam))getTableData(queryParam)
}

const validateQuery = (data) => {
  if (data.uid && data.uid.length > 0) {
    if (!validatePsidno(data.uid)) {
      ElMessage({
        type: 'error',
        message: '账号格式不正确'
      })
      return false
    }
  }
  if (data.uname && data.uname.length > 0) {
    if (!validateUname(data.uname)) {
      ElMessage({
        type: 'error',
        message: '姓名格式不正确'
      })
      return false
    }
  }
  return true
}

function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，需要加1
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

// 查询
const getTableData = async (queryParam) => {
  const table = await apiListUser({
    "userRequest": {
      page_num: page.value.page,
      page_size: page.value.pageSize,
      ...queryParam 
    }
  })
  if (table.code === 200) {
    tableData.value = table.listUserResponse.data;
    page.value =
    {
      total: table.listUserResponse.page.total,
      page: page.value.page,
      pageSize: page.value.pageSize
    }
  }
}

watch(
  () => tableData.value,
  () => {
  }
)

const changeBindRole = async (val) => {
  userList.value = []
  userForm.value.puid = ''
  let rid = 0
  switch (val) {
    case 2:
      return
    case 3:
      rid = 2
      break
    case 4:
      rid = 2
      break
  }
  const res = await apiListUser({ userRequest: { rid: rid } })
  if (res.code === 200) {
    userList.value = res.listUserResponse.data
  }
}


const initPage = async () => {
  getTableData({
    del: necessaryQuery.value.delFlag
  });
}

const roleList = ref([
  {
    rid: 2,
    rname:'实验室审核员'
  },
  {
    rid: 3,
    rname:'实验室研判员'
  },
  {
    rid: 4,
    rname:'普通用户'
  },
])
const userList = ref([])
const userFormRef = ref()

// 弹窗相关
const userForm = ref({
  uid:'',
  uname: "",
  phone: "",
  // province: "",
  // city: "",
  // district: "",
  // expire: "",
  rid: "",
  // puid: "",
  idpolice: "",
  org: "",
  use_ip: '',
  passwd: '',
  passwd2: '',
});

const checkPhone = (rule, value, callback) => {
  if (!validatePhone(userForm.value.phone) ) {
    return callback(new Error('手机号信息不正确'))
  }
  return callback()
}

const checkIp = (rule, value, callback) => {
  if (!validateIP(userForm.value.use_ip) ) {
    return callback(new Error('IP地址不正确'))
  }
  return callback()
}

const changeUseIp = () => {
  userFormRef.value.validateField('use_ip')
}

const rules = reactive<FormRules<typeof userForm>>({
  uid: [{ required: true, validator: checkUid, trigger: 'blur' }],
  idpolice: [{ required: true, validator: checkIdpolice, trigger: "blur" }],
  phone: [{ required: true, validator: checkPhone, trigger: 'blur' }],
  // expire: [{ required: true, message: "请选择过期时间", trigger: "change" }],
  rid: [{ required: true, message: "请选择绑定角色", trigger: "change" }],
  org: [{ required: true, message: "请输入所属部门", trigger: "blur" }],
  // puid: [{ required: true, message: "请选择绑定上级账号", trigger: "change" }],
  uname: [{ required: true, validator: checkUname, trigger: "blur" }],
  use_ip: [{ required: true, validator: checkIp, trigger: "change" }],
  passwd: [{ required: true, validator: checkPasswd, trigger: "blur" }],
  passwd2: [{ required: true, validator: (rule,value, callback) => checkPasswd2(rule, userForm.value.passwd, value, callback), trigger: "blur" }],
});

const dialogParams = ref({
  title: '添加用户',
  width: '800',
  visible: false,
  opr: 'add'
})

const toAdd = () => {
  dialogParams.value.visible = true
  dialogParams.value.title = '新增用户'
  dialogParams.value.opr = 'add'
  dialogParams.value.width = 800
};

const toEditPasswd = async (data?: Object) => {
  const res = await apiGetUser({ userRequest: { uid:data.uid } })
  if (res.code === 200) {
    const data = res.simpleUser
    userForm.value.uid = data.uid
    dialogParams.value.visible = true
    dialogParams.value.title = `修改密码`
    dialogParams.value.opr = 'editPasswd'
    dialogParams.value.width = '500'
    // userForm.value.puid = data.puid
    // text2code([data.province,data.city,data.district])
  }
}

const toEdit = async(data?:Object) => {
  const res = await apiGetUser({ userRequest: { uid:data.uid } })
  if (res.code === 200) {
    const data = res.simpleUser
    userForm.value.uid = data.uid
    userForm.value.uname = data.uname
    userForm.value.phone = data.phone
    // userForm.value.province = data.province
    // userForm.value.city = data.city
    // userForm.value.district = data.district
    // userForm.value.expire = data.expire
    userForm.value.idpolice = data.idpolice
    userForm.value.org = data.org
    userForm.value.use_ip = data.use_ip
    userForm.value.rid = data.rid
    dialogParams.value.visible = true
    dialogParams.value.title = '修改用户'
    dialogParams.value.opr = 'edit'
    dialogParams.value.width = 800
    await changeBindRole(userForm.value.rid)
    // userForm.value.puid = data.puid
    // text2code([data.province,data.city,data.district])
  }
}

const toDel = (data) => {
  ElMessageBox.confirm(`此操作将永久删除用户${data.uname}, 是否继续?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async() => {
    const res = await apiDelUser({ userRequest: { uid: data.uid } })
    if (res.code === 200) {
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      getTableData({
    del: necessaryQuery.value.delFlag
  })
    }
  }).catch(() => {
    console.log('取消')
  });
}

const resetUserForm = () => {
  userForm.value = {
    uid: '',
    uname: "",
    phone: "",
    // province: "",
    // city: "",
    // district: "",
    // expire: "",
    rid: "",
    // puid: "",
    idpolice: "",
    org: "",
    use_ip: "",
    passwd: "",
    passwd2: "",
  }
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const handleClose = (formEl: FormInstance | undefined) => {
  resetUserForm()
  resetForm(formEl)
  selectedAreaOptions.value = []
  dialogParams.value.visible = false
  dialogParams.value.title = '新增用户'
}

const goAdd = async () => {
  const form = {
    uid: userForm.value.uid,
    uname: userForm.value.uname,
    phone: userForm.value.phone,
    // province: userForm.value.province,
    // city: userForm.value.city,
    // district: userForm.value.district,
    // expire: userForm.value.expire,
    rid: userForm.value.rid,
    // puid: userForm.value.puid,
    idpolice: userForm.value.idpolice,
    org: userForm.value.org,
    use_ip: userForm.value.use_ip,
    passwd: md5.md5("ltsc2019"+userForm.value.passwd)
  }
  return await apiAddUser({ userRequest: form })
}

const goEditPasswd = async () => {
  const form = {
    uid: userForm.value.uid,
    passwd: md5.md5("ltsc2019"+userForm.value.passwd)
  }
  return await apiEditPasswd({ userRequest: form })
}

const goEdit = async () => {
  const form = {
    uid: userForm.value.uid,
    uname: userForm.value.uname,
    phone: userForm.value.phone,
    // province: userForm.value.province,
    // city: userForm.value.city,
    // district: userForm.value.district,
    // expire: userForm.value.expire,
    rid: userForm.value.rid,
    // puid: userForm.value.puid,
    idpolice: userForm.value.idpolice,
    org: userForm.value.org,
    use_ip: userForm.value.use_ip,
  }
  return await apiEditUser({ userRequest: { ...form } })
}

const execute = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async(valid, fields) => {
    if (valid) { 
      let res = null
      if (dialogParams.value.opr == 'add') {
        res = await goAdd()
      } else if (dialogParams.value.opr == 'editPasswd') {
        res = await goEditPasswd()
      }
      else {
        res = await goEdit()
      }
      if (res.code === 200) {
        ElMessage({
          type: 'success',
          message: '操作成功'
        })
        handleClose(formEl)
      } else {
        return
      }
      getTableData({
    del: necessaryQuery.value.delFlag
  })
     }
  })
  return
}

</script>

<style lang="scss">
.view-container{
  padding-right: 10px;
  height: 750px;
  display: flex;
  flex-direction: column;
}
.header-img-box {
  @apply w-52 h-52 border border-solid border-gray-300 rounded-xl flex justify-center items-center cursor-pointer;
}
.query-box{
  width: 100%;
  margin-top: 5px;
}
.zh-query-box {
  @apply p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2;
  border: 1px solid var(--table-border);
}
.zh-table-box {
  @apply p-4 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded my-2;
  border: 1px solid var(--table-border);
  flex: 1;
}
.first{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dialog-left{
  width: 100%;
}
.dialog-right{
  width: 100%;
  padding-left:10px;
  max-height: 400px;
  overflow: auto;
}
.cube-enter-active,
.cube-leave-active {
	transition: all .7s;
}

.cube-enter-from,
.cube-leave-to {
	transform: translateY(0px) rotateX(40deg);
	opacity: 0;
}

.cube-enter-to,
.cube-leave-from {
	transform: translateY(0) rotateX(0deg);
	opacity: 1;
}
h4{
  text-indent: 1em;
}
.validate-col {
  padding-bottom: 17px;
}
.el-form-item.is-error {
  .ip_input_container{
    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
  }
}
::v-deep(.el-form){
  max-width: 800px !important;
}
.el-form-item--label-top .el-form-item__label{
  margin-bottom: 0px;
}
.el-form-item__label{
  font-size: 14px;
  font-weight: 500;
}
.sub-title{
  border: 1px solid rgb(229,230,235);
  padding: 10px;
  border-radius: 2px;
  transition: box-shadow .2s cubic-bezier(0,0,1,1);
}
.sub-title > .el-form-item__label{
  padding: 0px 0 0 0;
  font-size: 15px;
  font-weight: 600;
  padding-bottom: 10px;
}
</style>
